<template>
  <div class="tree-container" @contextmenu.prevent="()=>false">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      <i slot="prefix" class="el-input__icon el-icon-search search"></i>
    </el-input>
    <div class="margin"></div>
    <div class="tree-con">
      <el-tree
        icon-class="custom"
        :props="defaultProps"
        ref="tree"
        :data="treeData"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        @node-expand="handleNodeClick"
        accordion
      ></el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { Tree } from "element-ui";

@Component
export default class extends Vue {
  defaultProps: Object = {
    children: "child",
    label: "name",
    isLeaf: "isLeaf",
  };
  // 树图筛选数据
  filterText: string = "";
  $refs!: {
    tree: Tree;
  };
  //   树图数据
  treeData = [];
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);

    if (tree) {
      tree.filter(val);
    }
  }

  private mounted(): void {
    this.loadNode();
  }
  // 鼠标点击
  handleNodeClick(data) {
    this.$emit('TerrClickObj',data)
  }
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  //隐藏当前右击事件组件

  // 树图加载
  loadNode() {
    
    (this as any).$services.getCtrlLeftTree().then((result: any) => {
      let data = result.data || [];
      this.treeData = data;
      let firstData=data[0]
      if(firstData){
        this.handleNodeClick(data[0])
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
    width: 100%;
    height: 100%;
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    .context-menu {
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
  .margin {
    height: 0.1rem;
  }
  .search {
    width: 0.3rem;
    height: 0.3rem;
    border-right: 1px solid #717ca1;
    color: #9eeaec;
  }
  .tree-con{
      width: 100%;
      height: calc(100% - 0.5rem);
      overflow: auto;
  }
}
</style>

